<template>
  <div ref="mapViewDiv" class="mapView-root"></div>
</template>
<script>
import WMTSLayer from "esri/layers/WMTSLayer";
import LayerList from "esri/widgets/LayerList";
import Map from "esri/Map";
import MapView from "esri/views/MapView";
import WebMap from "esri/WebMap";
import SceneView from "esri/views/SceneView";
import { ref, onMounted } from "vue";

export default {
  name: "EsriMap",
  props: {
    radius: {
      type: Number,
      default: 60,
    },
  },
  setup() {
    let mapViewDiv = ref("mapViewDiv");

    const { clusterMap,layer } = useMap();
    onMounted(() => {
      var view = new MapView({
        container: mapViewDiv.value,
        map: clusterMap,
        center: [16.463814503649008, 48.13488142774444],
        scale: 144201449.5083617,
      });
      view.when(function () {
        view.extent = layer.fullExtent;
        var layerList = new LayerList({
          view: view,
        });
        view.ui.add(layerList, "bottom-left");
      });
      console.log(view);
    });

    return { mapViewDiv };
  }, //end setup
};
const useMap = () => {
  let layer = new WMTSLayer({
    url: "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best",
    copyright:
      "<a target='_top' href='https://earthdata.nasa.gov'>Earthdata</a> by <a target='_top' href='https://www.nasa.gov'>NASA</a>",
    activeLayer: {
      id: "SRTM_Color_Index",
    },
  });

  let clusterMap = new Map({
    layers: [layer],
  });

  return { clusterMap, layer };
};
</script>
<style scoped>
.mapView:focus,
.mapView-root:focus {
  outline: none !important;
}

.mapView-root {
  background-color: rgb(228, 94, 17);
  width: 1000px;
  height: 800px;
}
</style>